<template>
  <div class="entity-config">
    <div class="flex justify-between items-center flex-wrap">
      <div class="flex justify-between flex-wrap gap-1">
        <a-form-item
          label="数据源名称"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-select
            ref="select"
            v-model:value="query.name"
            style="width: 168px"
            @focus="focus"
            @change="handleChange"
          >
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
            <a-select-option value="disabled" disabled
              >Disabled</a-select-option
            >
            <a-select-option value="Yiminghe">yiminghe</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="维度名称"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-input
            v-model:value="query.dimensionName"
            placeholder="请输入维度名称"
          />
        </a-form-item>
        <a-form-item
          label="适用维度"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-select
            ref="select"
            v-model:value="query.applicableDimension"
            style="width: 168px"
            @focus="focus"
            @change="handleChange"
          >
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
            <a-select-option value="disabled" disabled
              >Disabled</a-select-option
            >
            <a-select-option value="Yiminghe">yiminghe</a-select-option>
          </a-select>
        </a-form-item>
      </div>
      <div class="grid gap-4 grid-cols-2 mb-[24px]">
        <a-button type="primary" @click="addMetrics">新增指标</a-button>
        <a-button type="primary" @click="unloadExcel">导入</a-button>
      </div>
    </div>

    <!-- 数据展示区域 -->
    <div class="table-container h-[800px]">
      <a-table
        :columns="MetricsColumns"
        :data-source="data"
        :pagination="pagination"
        :scroll="{
          x: true,
          y: 648,
        }"
      >
        <template #headerCell="{ column }">
          <template v-if="column.key === 'name'">
            <span>
              <smile-outlined />
              指标名称
            </span>
          </template>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <a>
              {{ record.name }}
            </a>
          </template>
          <template v-else-if="column.key === 'tags'">
            <span>
              <a-tag
                v-for="tag in record.tags"
                :key="tag"
                :color="
                  tag === 'loser'
                    ? 'volcano'
                    : tag.length > 5
                      ? 'geekblue'
                      : 'green'
                "
              >
                {{ tag.toUpperCase() }}
              </a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'action'">
            <span>
              <a>Invite 一 {{ record.name }}</a>
              <a-divider type="vertical" />
              <a>Delete</a>
              <a-divider type="vertical" />
              <a class="ant-dropdown-link">
                More actions
                <down-outlined />
              </a>
            </span>
          </template>
          <!-- <template v-else-if="column.dataIndex === 'operation'">
            <a-space :size="8" class="w-[200px]">
              <a-button type="primary">Primary</a-button>
              <a-button>Default</a-button>
              <a-button type="dashed">Dashed</a-button>
              <a-button type="link">Link</a-button>
            </a-space>
          </template> -->
          <template v-else-if="column.dataIndex === 'operation'">
            <a-space :size="8">
              <a-button class="text-[#1677ff]" type="text">编辑</a-button>
              <a-button type="text" danger>删除</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>
    <metricsDialog ref="dialogRef" />
    <uploadDialog ref="uploadDialogRef" />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive,defineAsyncComponent } from 'vue';
  import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
  import type { PaginationProps } from 'ant-design-vue';
  import { MetricsColumns } from '@/config/header-setting';
  const metricsDialog = defineAsyncComponent(
    () => import('./components/dialog.vue'),
  );
  const uploadDialog = defineAsyncComponent(
    () => import('./components/uploadDialog.vue'),
  );
  const dialogRef = ref();
  const uploadDialogRef = ref();
  const query = reactive({
    name: 'Jack',
    dimensionName: '',
    applicableDimension: '1',
  });

  const focus = () => {
    console.log('focus');
  };

  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };

  const pagination = reactive<PaginationProps>({
    pageSize: 10,
    pageSizeOptions: ['10', '20', '30', '40'],
    current: 1,
    total: 3,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total) => `总数据位：${total}`,
    onChange(current, pageSize) {
      pagination.pageSize = pageSize;
      pagination.current = current;
      init();
    },
  });

  const init = async () => {};

  const data = [
    {
      id: 201,
      name: '日活跃用户',
      keyName: 'dau',
      synonyms: ['DAU'],
      metricType: '基础指标',
      calculationMethod: 'COUNT(DISTINCT user_id)',
      relatedMetrics: ['MAU', '留存率'],
      applicableDimensions: ['时间', '地区'],
      createdAt: '2023-01-15',
    },
    {
      id: 202,
      name: '订单转化率',
      keyName: 'conversion_rate',
      synonyms: ['转化率'],
      metricType: '复合指标',
      calculationMethod: '订单数/访问量',
      relatedMetrics: ['GMV', '客单价'],
      applicableDimensions: ['时间', '渠道'],
      createdAt: '2023-03-22',
    },
  ];
  const addMetrics = () => {
    dialogRef.value?.openDialog();
  };
  const unloadExcel = () => {
    uploadDialogRef.value?.openDialog();
  };
</script>

<style scoped lang="scss"></style>
